<template>
    <div class="organization">
        <!--左边组织结构-->
        <div class="left">
            <n-scrollbar>
                <admin-organization :set-current="setCurrent"/>
            </n-scrollbar>
        </div>
        <div class="right">
            <div class="add" v-show="current.id">
                <h3>{{ current.name }}</h3>
                <div>
                    <n-button @click="alterButton">
                        修改信息
                    </n-button>
                    <n-upload
                        v-show="current.id==='00000'"
                        :action="app.ip+'admin/upload/logo'"
                        :headers="{token: user.getToken}"
                        @finish="handleFinish"
                        :file-list-style="{display:'none'}"
                    >
                        <n-button v-show="current.id==='00000'" class="pointer">上传logo</n-button>
                    </n-upload>
                    <!--修改信息模态框-->
                    <n-modal
                        v-model:show="showModal"
                        :mask-closable="false"
                        preset="dialog"
                        title="修改信息"
                    >
                        <div>
                            <span>学院名称: </span>
                            <n-input v-model:value="alterInfo.name" type="text" placeholder="学院名称"/>
                        </div>
                        <div>
                            <span>修改信息: </span>
                            <n-input v-model:value="alterInfo.info" type="textarea" placeholder="修改信息"/>
                        </div>
                        <n-button @click="showModal=false">
                            不改了
                        </n-button>
                        <n-button type="primary" @click="alter">
                            改一下
                        </n-button>
                    </n-modal>
                    <n-button @click="del" type="error">
                        删除
                    </n-button>
                </div>
                <n-divider/>
                <div v-show="current.identity !=='专业'">
                    <span>添加 <b>{{ current.identity === '学校' ? '学院' : '专业' }}</b></span>
                    <br>
                    <!--名称-->
                    <n-input
                        v-model:value="submitInfo.name"
                        type="text"
                        placeholder="名称"

                    />
                    <!--简介-->
                    <n-input v-model:value="submitInfo.info" type="textarea" placeholder="简介" :autosize="{
                        minRows: 3,
                        maxRows: 5
                    }"/>
                    <!--提交按钮-->
                    <n-button size="large" @click="submit">提交</n-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

import workApi from "@/http/workApi";
import {useAdminStore} from "@/stores/admin";
import {NButton} from "naive-ui";
import AdminOrganization from "@/components/admin/侧边栏/Admin-Organization.vue";
import {useAppStore} from "@/stores/app";
import {useUserStore} from "@/stores/user";

const app = useAppStore()
const user = useUserStore()

const useAdmin = useAdminStore()

function handleFinish() {
    // 文件上传成功 刷新页面
    location.reload()
}



// 当前选中组织
const current = reactive({
    identity: '学校',
    id: "00000",
    name: '深圳技师学院',
    info: null,
})
const clearCurrent = () => {
    current.identity = null
    current.id = null
    current.name = null
    current.info = null
}
// 改变选中组织
const setCurrent = ({identity, id, name, info}) => {
    current.identity = identity
    current.id = id
    current.name = name
    current.info = info
}


// 修改学院与专业
let showModal = ref(false)
let alterInfo = reactive({})
let alterButton = () => {
    if (current.id === '00000') {
        window.$message.error("学校好像修改不了")
        return
    }
    showModal.value = true
    alterInfo.id = current.id
    alterInfo.info = current.info
    alterInfo.name = current.name
}
let alter = () => {
    let identity = current.identity
    let url = identity === '学院' ? 'admin/college' : 'admin/profession'
    workApi.put(url, {
        id: alterInfo.id,
        name: alterInfo.name,
        info: alterInfo.info
    }).then(() => {
        showModal.value = false
        clearCurrent()
        useAdmin.setAcademy()
    })
}

// 删除学院与专业
const dialog = useDialog()
let del = () => {
    let identity = current.identity
    let url = identity === '学院' ? 'admin/college' : 'admin/profession'

    if (current.id === '00000') {
        window.$message.error("学校好像删除不了")
    } else {
        dialog.warning({
            title: '警告',
            content: '你确定删除吗？',
            positiveText: '确定',
            negativeText: '不确定',
            onPositiveClick: () => {
                workApi.delete(url, {
                    data: {id: current.id}
                }).then((res) => {
                    if (res.success) {
                        useAdmin.setAcademy()
                        clearCurrent()
                    }
                })
            },
        })

    }
}
// 创建新学院或者专业
let submitInfo = reactive({
    name: '',
    info: '',

})
let submit = () => {
    if (current.id === '00000') {
        workApi.post('admin/college', {
            college: submitInfo.name,
            info: submitInfo.info,
        }).then(() => {
            submitInfo.name = ''
            submitInfo.info = ''
            useAdmin.setAcademy()
        });
        return
    }
    workApi.post('admin/profession', {
        college: current.id,
        profession: submitInfo.name,
        info: submitInfo.info,
    }).then(() => {
        submitInfo.name = ''
        submitInfo.info = ''
        useAdmin.setAcademy()
    })

}


</script>

<style scoped lang="less">
.n-button {
    margin: 15px;
}

.organization {
    display: flex;
    height: 90vh;
    background-color: #d7d7d7;

    .left {
        flex: 2;

        .n-collapse-item {
            font-size: 40px;
        }

        .profession {
            padding-left: 10%;
            font-size: 20px;
        }
    }

    .right {
        position: relative;
        flex: 8;
        background-color: #fff;

        .add {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70%;
            height: 70%;
            font-size: 20px;

            .n-button {
                margin: 0 30px 20px 0;
            }

            > div:nth-child(2) {
                display: flex;
                .n-upload{
                    width: 120px;
                }
            }
        }
    }
}
</style>